<template>
  <div class="login_background">
    <div class="title">
      <h4>ONCE 登录</h4>
      <p>明的个人博客，属于技术的多彩世界于此打开</p>
    </div>
    <div class="login_regiest" :class="{ box_rolling: back }">
      <div style="height: 100%; width: 100%" class="front">
        <div class="login_name">登录</div>
        <el-form ref="form" :model="userinfo">
          <el-form-item>
            <el-input
              prefix-icon="el-icon-user"
              v-model="userinfo.username"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              prefix-icon="el-icon-key"
              v-model="userinfo.password"
              placeholder="请输入密码"
              show-password
            ></el-input>
          </el-form-item>
          <div
            style="
              float: right;
              font-size: 1rem;
              color: #555999;
              cursor: pointer;
            "
          >
            忘记密码?
          </div>
          <div class="button">
            <el-button type="info" @click="Login">登&nbsp;&nbsp;录</el-button>
          </div>
          <div class="regiest">
            <span style="float: left; font-size: 1rem">还没有账号？</span>
            <span
              style="
                float: right;
                font-size: 1rem;
                color: #555999;
                cursor: pointer;
              "
              @click="TurnToRegiest"
              >立即注册</span
            >
          </div>
        </el-form>
      </div>
      <div style="height: 100%; width: 100%" class="back">
        <h3>欢迎注册</h3>
        <el-form ref="form" :model="userinfo" label-width="55px">
          <el-form-item label="用户名">
            <el-input
              v-model="userinfo.username"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              v-model="userinfo.phone"
              placeholder="请输入手机号"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              v-model="userinfo.password"
              placeholder="请输入密码"
              show-password
            ></el-input>
          </el-form-item>
          <div class="button_reg">
            <el-button type="primary" @click="Regiest"
              >注&nbsp;&nbsp;册</el-button
            >
          </div>
          <div class="regiest">
            <span style="float: left; font-size: 1rem">已有账号？</span>
            <span
              style="
                float: right;
                font-size: 1rem;
                color: #555999;
                cursor: pointer;
              "
              @click="TurnToLogin"
              >登&nbsp;录</span
            >
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions,nextTick } from "vuex";
import { Regiest } from "@/api/users.js";
// import { getMenu } from "@/api/menu.js";
export default {
  data() {
    return {
      back: false,
      userinfo: {},
    };
  },
  mounted() {},
  methods: {
    ...mapActions(["LoginIn", "getMenuList"]),
    TurnToLogin() {
      this.back = false;
      this.userinfo = {};
    },
    TurnToRegiest() {
      setTimeout(() => {
        this.back = true;
        this.userinfo = {};
      }, 300);
    },
    async Regiest() {
      let res = await Regiest(this.userinfo);
      if (res.status == 200) {
        this.$message.success(res.message);
      } else {
        this.$message.warning(res.message);
      }
    },
    async Login() {
      let that = this;
      that
        .LoginIn(this.userinfo)
        .then(async (res) => {
          that.$router.push("/home");
          nextTick(()=>{
            this.$notify.success({
              title: "欢迎",
              message: `${res.message},欢迎回来`,
            });
          })
        })
        .catch((err) => {
          that.$message.warning(err.message);
        });
    },
  },
};
</script>
<style lang='scss' scoped>
.login_background {
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/login/login.jpg");
  background-size: 100% 100%;
  position: relative;
  .title {
    width: 100%;
    height: 10%;
    position: absolute;
    text-align: center;
    top: 10%;
    color: #ffffff;
    font-size: 1rem;
    letter-spacing: 0.5rem;
  }
  .login_regiest {
    width: 20rem;
    height: 24rem;
    position: absolute;
    top: 25%;
    left: calc(50% - 10rem);
    perspective: 1000px;
    .front,
    .back {
      transform-style: preserve-3d;
      backface-visibility: hidden;
      transition-duration: 0.5s;
      transition-timing-function: ease-in;
      padding: 1rem 1.5rem;
      box-sizing: border-box;
      border-radius: 0.5rem;
      background: rgba(255, 255, 255, 0.6);
    }
    .back {
      transform: rotateY(180deg);
      visibility: hidden; //元素不可见，但占据空间
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      border-radius: 0.5rem;
      // border: 1px solid red;
    }
    //登录
    .login_name {
      width: 100%;
      height: 10%;
      text-align: center;
      letter-spacing: 0.5rem;
      font-size: 1.5rem;
      // margin-bottom: 2.5rem;
      margin-bottom: 10%;
    }
    .button {
      text-align: center;
      // margin-top: 4rem;
      margin-top: 25%;
      /deep/ .el-button {
        width: 70%;
      }
    }
    .regiest {
      margin-top: 12%;
    }
    // 注册
    .button_reg {
      text-align: center;
      // margin-top: 1rem;
      margin-top: 8%;
      /deep/ .el-button {
        width: 70%;
      }
    }
  }
  // 卡片点击翻转
  .box_rolling {
    .front {
      transform: rotateY(180deg);
      visibility: hidden;
    }
    .back {
      transform: rotateY(360deg);
      visibility: visible;
    }
  }
}
</style>